<template>
	<view class="my">
		<!-- 头部内容 -->
		<view class="my-header">
			<view class="header-main">
			  <view class="header-config">
				  <image class="config-img" @tap="goToConfig" src="../../static/image/config.png" mode=""></image>
			  </view>
			  <view class="header-my">
			  	<image class="my-img" :src="userInfo ? userInfo.imgUrl : '../../static/img/my_1.jpg'" mode="" ></image>
				<view class="my-name">{{userInfo ? userInfo.nickName :"用户名称"}}</view>
			  </view>
			</view>
		</view>
		
		<!--  -->
		<view class="order">
			<view class="order-title" @tap="goToOrder">
				<view>我的订单</view>
				<view class="order-title-name">全部订单<span class="iconfont icon-youjiantou"></span></view>
			</view>
			<view class="order-list">
				
				<view class="order-item">
					<image class="order-img" src="../../static/image/order1.png" mode=""></image>
					<view>代付款</view>
				</view>
				
				<view class="order-item">
					<image class="order-img" src="../../static/image/order2.png" mode=""></image>
					<view>代付款</view>
				</view>
				
				<view class="order-item">
					<image class="order-img" src="../../static/image/order3.png" mode=""></image>
					<view>代付款</view>
				</view>
				
				<view class="order-item">
					<image class="order-img" src="../../static/image/order4.png" mode=""></image>
					<view>代付款</view>
				</view>
				
				<view class="order-item">
					<image class="order-img" src="../../static/image/order5.png" mode=""></image>
					<view>代付款</view>
				</view>
			</view>
		</view>
		
		<!--  -->
		<view class="my-content">
			<view class="my-content-list">
				<view class="my-content-item">
					<view>我的收藏</view>
					<view><span class="iconfont icon-youjiantou"></span></view>
				</view>
				<view class="my-content-item">
					<view>我的收藏</view>
					<view><span class="iconfont icon-youjiantou"></span></view>
				</view>
				<view class="my-content-item">
					<view>我的收藏</view>
					<view><span class="iconfont icon-youjiantou"></span></view>
				</view>
				<view class="my-content-item">
					<view>我的收藏</view>
					<view><span class="iconfont icon-youjiantou"></span></view>
				</view>
				<view class="my-content-item">
					<view>我的收藏</view>
					<view><span class="iconfont icon-youjiantou"></span></view>
				</view>
				<view class="my-content-item">
					<view>我的收藏</view>
					<view><span class="iconfont icon-youjiantou"></span></view>
				</view>
			</view>
			
		</view>
		<tabbar cureentPage='my'></tabbar>
	</view>
	
</template>

<script>
	import {mapState} from "vuex";
	import Tabbar from "@/component/common/tabbar.vue"
	export default{
		data(){
			return{
				
			}
		},
		computed:{
			...mapState({
				loginStatus:state=>state.user.loginStatus,
				userInfo:state=>state.user.userInfo
			})
		},
        components:{
			Tabbar
		},
		methods:{
			goToConfig(){
				uni.navigateTo({
					url:"/pages/my-config/my-config"
				})
			},
			goToOrder(){
				uni.navigateTo({
					url:"/pages/my-order/my-order"
				})
			},
		}
	}
	
</script>

<style scoped>
	.my-header{
		background:url("../../static/image/mybg.png") no-repeat;
		width: 100%;
		height: 400rpx;
	}
	
	.header-main{
		position: relative;
		top:120rpx
	}
	.header-my{
		position: absolute;
		left: 50%;
		margin-left: -60rpx;
		width: 120rpx;
		height: 120rpx;
	}
	.header-config{
		position: absolute;
		left: 40rpx;
	}
	.config-img{
		width: 40rpx;
		height: 40rpx
	}
	.my-img{
		width: 120rpx;
		height: 120rpx;
		border: 2rpx solid #f7f7f7;
		border-radius: 50% ;
		background-color: red;
	}
	.my-name{
		color: white;
		text-align: center;
	}
	.order-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
	/* 	padding: 18rpx; */
	}
	.order-list{
		padding: 20rpx;
		display: flex;
	}
	.order-item{
		flex:1;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	.order-img{
		width: 84rpx;
		height: 84rpx;
	}
	.my-content{
		margin:20rpx 0 ;
		padding: 0 20rpx;
	}
	.my-content-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 8rpx solid #f7f7f7;
	}
</style>
